<template>
	<div>
		<div class="topTitle">消息管理</div>
		<el-form inline :model="query" label-width="80px">
			<el-form-item label="标题">
				<el-input v-model="query.title" placeholder="请输入关键字" class="width260 margin-right10"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
				<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="margin-bottom20">
			<el-button type="primary" @click="handleEdit">新建</el-button>
		</div>
		<el-table :data="tableData" border header-cell-class-name="table-header-style">
			<el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
			<el-table-column label="标题">
				<template slot-scope="scope">
					<div class="line1">{{scope.row.title||''}}</div>
				</template>
			</el-table-column>
			<el-table-column label="内容" align="center">
				<template slot-scope="scope">
					<div class="line1">{{scope.row.content||''}}</div>
				</template>
			</el-table-column>
			<el-table-column label="面向用户类型" align="center">
				<template slot-scope="{row}">
					<span v-if="row.userType==1">全部用户</span>
					<span v-else-if="row.userType==2">按地区</span>
					<span v-else-if="row.userType==3">按科目</span>
					<span v-else-if="row.userType==4">按购买商品</span>
					<span v-else-if="row.userType==5">按注册时间</span>
				</template>
			</el-table-column>
			<el-table-column label="设备类型" align="center">
				<template slot-scope="{row}">
					<span v-if="row.equipType==1">全部</span>
					<span v-else-if="row.equipType==2">安卓</span>
					<span v-else-if="row.equipType==3">ios</span>
				</template>
			</el-table-column>
			<el-table-column label="跳转类型" align="center">
				<template slot-scope="{row}">
					<span v-if="row.skipType==1">机构页</span>
					<span v-else-if="row.skipType==2">专题页</span>
					<span v-else-if="row.skipType==3">商品页</span>
					<span v-else-if="row.skipType==4">公告页</span>
					<span v-else-if="row.skipType==5">经验页</span>
				</template>
			</el-table-column>
			<el-table-column label="发布时间" prop="createTime" align="center"></el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
					<el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDel(scope.row.id)">
						<el-button type="text" slot="reference">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNumber"
				:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :page-size="query.pageSize" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>

		<!-- 编辑详情 -->
		<el-dialog :title="title" :visible.sync="visible" width="60%">
			<el-form :model="form" label-width="110px" ref="form" :rules="rules">
				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title" placeholder="请输入标题"></el-input>
				</el-form-item>
				<el-form-item label="消息内容" prop="content">
					<el-input placeholder="请输入消息内容" v-model="form.content" type="textarea" rows="12"
						class="width100Per"></el-input>
				</el-form-item>
				<el-form-item label="面向用户类型" prop="userType">
					<el-radio-group v-model="form.userType">
						<el-radio :label="1">全部用户</el-radio>
						<el-radio :label="2">按地区</el-radio>
						<el-radio :label="3">按科目</el-radio>
						<el-radio :label="4">按购买商品</el-radio>
						<el-radio :label="5">按注册时间</el-radio>
					</el-radio-group></br>
					<el-cascader v-if="form.userType==2" :props="props" v-model="form.area" :options="areaData"
						placeholder="请选择地区" class="width300" @change="areaChange"></el-cascader>
					<el-select clearable placeholder="请选择科目" v-model="form.appId" multiple class="width300"
						v-if="form.userType==3">
						<el-option v-for="(item,index) in miniData" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
					<el-select placeholder="请选择" v-model="form.productId" class="width300" v-if="form.userType==4">
						<el-option v-for="(item,index) in productData" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
					<el-date-picker v-model="form.date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="dateChange" v-if="form.userType==5">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="设备类型" prop="equipType">
					<el-radio-group v-model="form.equipType">
						<el-radio :label="1">全部</el-radio>
						<el-radio :label="2">安卓</el-radio>
						<el-radio :label="3">ios</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="跳转类型" prop="skipType">
					<el-radio-group v-model="form.skipType" @change="skipChange">
						<el-radio :label="1">机构页</el-radio>
						<el-radio :label="2">专题页</el-radio>
						<el-radio :label="3">商品页</el-radio>
						<el-radio :label="4">公告页</el-radio>
						<el-radio :label="5">经验页</el-radio>
					</el-radio-group>
					<br>
					<el-select placeholder="请选择" v-model="form.skipId" class="width300" v-if="form.skipType==1">
						<el-option v-for="(item,index) in skipList" :key="index" :label="item.organName"
							:value="item.id"></el-option>
					</el-select>
					<el-select placeholder="请选择" v-model="form.skipId" class="width300" v-else-if="form.skipType==4">
						<el-option v-for="(item,index) in skipList" :key="index" :label="item.title" :value="item.id"></el-option>
					</el-select>
					<el-select placeholder="请选择" v-model="form.skipId" class="width300" v-else-if="form.skipType==5">
						<el-option v-for="(item,index) in skipList" :key="index" :label="item.titleName"
							:value="item.id"></el-option>
					</el-select>
					<el-select placeholder="请选择" v-model="form.skipId" class="width300" v-else>
						<el-option v-for="(item,index) in skipList" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button @click="handleSave" type="primary">确 认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				pageTotal: 0,
				form: {},
				visible: false,
				organList: [],
				title: '',
				skipTypeData: [],
				areaData: [],
				props: {
					value: 'id',
					label: 'name',
					checkStrictly: true,
					multiple: true
				},
				miniData: [],
				skipList: [],
				rules: {
					title: {
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					},
					content: {
						required: true,
						message: '请输入消息内容',
						trigger: 'blur'
					},
					userType: {
						required: true,
						message: '请选择面向用户类型',
						trigger: 'change'
					},
					equipType: {
						required: true,
						message: '请选择设备类型',
						trigger: 'change'
					},
					skipType: {
						required: true,
						message: '请选择跳转类型',
						trigger: 'change'
					}
				},
				productData: []
			}
		},
		mounted() {
			this.getAllArea()
			this.getAll()
			this.getOrganAll()
			this.getProductData()
			this.getData()
		},
		methods: {
			//获取所有专题
			async getSubjectData() {
				const res = await this.$get('/admin/specialSubject/pageSubject', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.skipList = res.data.list
				}
			},
			//获取所有商品
			async getProductData() {
				const res = await this.$get('/admin/mall/pageProduct', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.productData = res.data.list
				}
			},
			//获取所有公告
			async getNoticeData() {
				let role = localStorage.getItem('roleType')
				let roleType;
				if (role == 3) {
					roleType = 2
				}
				const res = await this.$get('/admin/articleNotice/pageArticleNotice', {
					pageNumber: 1,
					pageSize: 9999,
					roleType
				})
				if (res.code == 1000) {
					this.skipList = res.data.list
				}
			},
			//获取经验下拉
			async getExperienceData() {
				const res = await this.$postForm('/admin/experiences/experienceAll', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.skipList = res.data.list
				}
			},
			skipChange(val) {
				this.skipList = []
				this.form.skipId = ''
				switch (val) {
					case 1:
						this.getOrganAll()
						break;
					case 2:
						this.getSubjectData()
						break;
					case 3:
						this.skipList = this.productData
						break;
					case 4:
						this.getNoticeData()
						break;
					case 5:
						this.getExperienceData()
						break;
				}
			},
			//获取机构下拉
			async getOrganAll() {
				const res = await this.$postForm('/admin/messages/organAll', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.skipList = res.data.list
				}
			},
			dateChange(val) {
				this.form.startTime = ''
				this.form.endTime = ''
				if (val && val.length != 0) {
					this.form.startTime = val[0]
					this.form.endTime = val[1]
				}
			},
			//获取所有科目
			async getAll() {
				const res = await this.$get('/admin/minis/getAll')
				if (res.code == 1000) {
					this.miniData = res.data
				}
			},
			areaChange(val) {
				this.form.province = []
				this.form.city = []
				if (val.length != 0) {
					for (let item of val) {
						if (item[0]) {
							this.form.province.push(item[0])
						}
						if (item[1]) {
							this.form.city.push(item[1])
						}
					}
				}
				this.form.province = [...new Set(this.form.province)]
				this.form.city = [...new Set(this.form.city)]
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getAllArea')
				if (res.code == 1000) {
					this.areaData = this.$.getTreeData(res.data)
					this.areaData.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: '0'
					})
				}
			},
			//确认编辑
			handleSave() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.form.city = this.form.city ? this.form.city.toString() : this.form.city
						this.form.province = this.form.province ? this.form.province.toString() : this.form.province
						this.form.appid = this.form.appid ? this.form.appid.toString() : this.form.appid
						this.$post('/admin/notice/addNotice', this.form).then(res => {
							if (res.code == 1000) {
								this.$message.success('操作成功')
								this.getData()
								this.visible = false
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//编辑详情
			handleEdit(row) {
				if (row.id) {
					this.title = '编辑'
					this.form = JSON.parse(JSON.stringify(row))
				} else {
					this.title = '新建'
					this.form = {
						skipType: 1,
						equipType: 1,
						userType: 1
					}
				}
				this.visible = true
			},
			//获取数据
			async getData() {
				const res = await this.$get('/admin/notice/pageNotice', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//分页
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			//删除
			async handleDel(id) {
				const res = await this.$postForm('/admin/notice/deleteNotice', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			//搜索
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			//重置
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			}
		}
	}
</script>

<style>
</style>